import React, { Component } from 'react'
import { Modal } from 'antd-mobile'
import { PopupModal } from './'

export default class Homepage extends Component {
  constructor() {
    super()
    this.state = {
      modal: false,
    }
  }
  render() {
    const { modal } = this.state
    return (
      <div className={`rt-homepage-container`}>
        <div className={`rt-important-information`}>重要资讯：加息前最后一次非农？看市场...</div>
        <img className={`rt-img`} alt="front-top" src={require('static/images/front_top.png')} />
        <div className={`rt-text-box`}>您的交易账号是：<span>13100001234</span> ，点击激活</div>
        <div className={`rt-img-box`}>
          <div
            className={`cm-button-with-shadow rt-active-at-once`}
            onClick={() => this.setState({modal: true})}
          >
            立即激活
          </div>
        </div>
        <div className={`rt-qr-code-box`}>
          <img alt="qr-code" src={require('static/images/qr-code.png')} />
        </div>
        <div className={`rt-bottom-text`}>
          <div className={`rt-wrapper`}>
            <p>1. 长按保存图片至手机相册</p>
            <p>2. 打开微信扫一扫，选择相册中二维码</p>
            <p>3. 关注“闻橙在线”公众号，体验交易</p>
          </div>
        </div>

        <PopupModal
          visible={modal}
          onClose={() => this.setState({modal: false})}
        />
      </div>
    )
  }
}